<template>
	<view class="container" :style="{'background': allBackground}">
		<image :src="allImg" class="bfnt_img"></image>
		<view class="page_title">
			<view class="page_title_1"></view>
			<view class="page_title_2"></view>
			<view class="page_title_3"></view>
			<text>{{allTitle}}</text>
			<view class="page_title_3"></view>
			<view class="page_title_2"></view>
			<view class="page_title_1"></view>
		</view>
		<view class="goods-list">
			<view v-for="(Goods, index) in MallGoodsList" :key="index" class="goods-item" @click="navToDetailPage(Goods.id)">
				<view class="image-wrapper">
					<image :src="Goods.logo" :class="[Goods.loaded]" mode="aspectFill" lazy-load @load="onImageLoad('MallGoodsList', index)"
					 @error="onImageError('MallGoodsList', index)"></image>
				</view>
				<text class="title clamp">{{ Goods.title }}</text>
				<!-- <text class="sub-title clamp">型号：{{ Goods.GoodsModel }}</text> -->
				<view class="price-box">
					<text class="price">{{ Goods.price_market }}</text>
					<text>已售 {{ Goods.number_sales }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import service from '@/store/service.js';

	export default {
		components: {},
		data() {
			return {
				MallGoodsList: [],
				page: 1,
				allTitle: '',
				allImg: '',
				cate_ids: '',
				allBackground: '#f1b8e1'
			};
		},

		onLoad(options) {
			console.log(668886, options)
			this.cate_ids = options.tid
			// if(options.title == 0){
			// 	this.allTitle = "年货盛宴"
			// 	uni.setNavigationBarTitle({
			// 				    title: "年货盛宴"
			// 				});
			// }else if(options.title == 1){
			// 	this.allTitle = "美妆护肤"
			// 	uni.setNavigationBarTitle({
			// 				    title: "美妆护肤"
			// 				});
			// }else if(options.title == 2){
			// 	this.allTitle = "家居百货"
			// 	uni.setNavigationBarTitle({
			// 				    title: "家居百货"
			// 				});
			// }
			this.loadCateList(options);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
			// plus.key.hideSoftKeybord();
		},

		//下拉刷新
		onPullDownRefresh() {
			this.MallGoodsList = [];
			this.page = 1
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			console.log(87894684)
			this.page++
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			toBack() {
				uni.navigateBack();
			},
			//第一次加载分类
			loadCateList() {
				let goodList = {
					cate_ids: this.cate_ids,
					page: 1,
					order: "desc",
					sort: "sales"
				}
				this.$http.get(service.api.index.getCateGoodList, goodList).then(
					res => {
						this.MallGoodsList = res.data.data;
						this.allTitle = res.data.cate_title
						uni.setNavigationBarTitle({
							title: res.data.cate_title
						});
						this.allImg = res.data.cate_image
					},
					err => {
						console.log('err: ' + JSON.stringify(err));
						this.$utils.showMsg(err.data.info);
					}
				);
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add', loading) {
				let that = this;
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				let params = {
					cate_ids: this.cate_ids,
					page: that.page,
					order: that.order,
					sort: that.sort
				};
				this.$http.get(service.api.index.getCateGoodList, params, true).then(
					res => {
						let goodsList = res.data.data;
						if (type === 'refresh') {
							this.MallGoodsList = goodsList;
						} else {
							this.MallGoodsList = this.MallGoodsList.concat(goodsList);
						}

						//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
						this.loadingType = this.MallGoodsList < 500 ? 'nomore' : 'more';
						if (type === 'refresh') {
							if (loading == 1) {
								// uni.hideLoading();
							} else {
								uni.stopPullDownRefresh();
							}
						}
					},
					err => {
						console.log('err: ' + JSON.stringify(err));
						this.$utils.showMsg(err.data.info);
					}
				);
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].DefaultPicURL = '/static/errorImage.jpg';
			},
			//详情
			navToDetailPage(item) {
				//为了模拟数据，正常项目里按照业务传值
				console.log(item)
				uni.navigateTo({
					url: `/pages/category/commodity?id=${item}`
				})
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	// 年货盛宴
	.page_title {
		display: flex;
		align-items: center;
		justify-content: center;

		.page_title_1 {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: #fff;
		}

		.page_title_2 {
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background: #fff;
			margin: 10rpx;
		}

		.page_title_3 {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #fff;
		}

		text {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			margin: 10rpx;
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		// justify-content: space-between;
		.goods-item {
			display: flex;
			flex-direction: column;
			width: 31vw;
			padding-bottom: 40upx;
			background: #fff;
			margin-bottom: 2vw;
			border-radius: 10rpx;
			margin: 2vw 0 2vw 1.8vw;
		}

		.image-wrapper {
			width: 100%;
			height: 250rpx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 8upx;
				width: 100%;
				height: 100%;
			}
		}

		.title {
			padding: 0 1vw;
			font-size: 32upx;
			color: #303133;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.sub-title {
			font-size: 28upx;
			color: #303133;
			margin: 15rpx 0rpx 30rpx 0rpx;
		}

		.price-box {
			padding: 0 1vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: #909399;
		}

		.price {
			font-size: 32upx;
			color: red;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}

	// 帮扶农特
	.bfnt_img {
		height: 260rpx;
		width: 100vw;
	}
</style>
